<template>
  <div class="login-container">
    <div class="login-window">
      <div class="login-font">
        <h1>
          Login
        </h1>
      </div>
      <div class="login-form">
        <div class="login-input">
          <el-input prefix-icon="el-icon-user" placeholder="请输入账号" />
        </div>
        <div class="login-input">
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password />
        </div>
        <div class="login-button">
          <el-button type="primary" round>登 录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.login-container{
    height: 100%;
    width: 100%;
    background-image: url('https://plus.hutool.cn/bing');
    background-position: 100%;
    .login-window{
        width: 505px;
        height: 100%;
        background: rgba(0, 106, 180, 0.4);
        box-shadow: 0px 38px 51px 0px rgba(13,0,40,0.6100);
        position: absolute;
        right: 100px;
        .login-font{
            margin-top: 100px;
            color: white;
            font-size: 180%;
            font-family: inherit;
            text-align: center;
        }
        .login-form{
            padding: 0px 20px 0px 20px;
            .login-input{
                margin: 60px 0px 60px 0px;
                .el-input{
                    ::v-deep .el-input__inner {
                        height: 55px;
                        border-radius: 25px;
                        background: rgba(33, 35, 36, 0.4);
                    }
                    ::v-deep .el-input__icon {
                        line-height: 50px;
                    }
                }
            }
            .login-button{
                text-align: center;
                ::v-deep .el-button.is-round{
                    border-radius: 40px;
                    padding: 18px 60px;
                    font-size: 25px;
                }
            }
        }
    }
    }
</style>
